import { props } from "../types";
import { node } from "../utils/node";
import { range } from "../utils/range";
import * as THREE from "three";
import { renderGeometries } from "../utils/renderGeometries";
import { Suspense, useState, useEffect, useRef } from "react";

export function AudioLines(props: props) {
  const Group = useRef<THREE.Group<THREE.Object3DEventMap> | null>(null);
  const barNodes = range(0, props.countData).map((index) => {
    return new node(
      props.radius,
      ((index / props.countData) * 360 + 45) % 360,
      new THREE.Vector2(0, 0)
    );
  });
  const lineMaterial = new THREE.LineBasicMaterial({
    color: new THREE.Color("red"),
  });
  const barLine = range(0, props.countData).map((index) => {
    return new THREE.Line(
      new THREE.BufferGeometry().setAttribute(
        "position",
        renderGeometries([
          barNodes[index].positionA(),
          barNodes[index].positionB(),
        ])
      ),
      lineMaterial
    );
  });
  const outLine = new THREE.Line(
    new THREE.BufferGeometry().setAttribute(
      "position",
      renderGeometries(barNodes.map((node) => node.positionA()))
    ),
    lineMaterial
  );
  const inLine = new THREE.Line(
    new THREE.BufferGeometry().setAttribute(
      "position",
      renderGeometries(barNodes.map((node) => node.positionB()))
    ),
    lineMaterial
  );
  useEffect(() =>{
    Group.current?.add(outLine);
    Group.current?.add(inLine);
    Group.current?.add(...barLine);
  },[])
  return <group ref={Group} ></group>;
}
